<template>
  <zm-view ref="view">
    <zm-navbar is-back :border-bottom="false" title="详情" @height="handleHeight">
      <view slot="right" class="flex items-center">
        <zm-button height="40rpx" width="40rpx" color="transparent" open-type="share" custom-class="ml-20 mt-4">
          <zm-icon name="share-circle" size="40rpx" color="#333"></zm-icon>
        </zm-button>
      </view>
    </zm-navbar>
    <!-- 轮播 -->
    <swiper ref="swiper" class="swiper-wrap">
      <swiper-item v-for="(item, index) in info.image" :key="index" class="swiper-item" @click="handleClickGoods(index)">
        <image class="swiper-item-image" :src="item.imageUrl" mode="aspectFit"></image>
      </swiper-item>
    </swiper>
    <!-- 商品详情信息 -->
    <view class="content">
      <view class="flex items-center px-20 pt-38">
        <view class="text-price mr-12">
          <text class="font-24">￥</text>
          <text class="font-42 font-bold">{{ info.sellPrice }}</text>
        </view>
        <view v-for="item in info.label" :key="item.labelId" class="tag solid-1">{{ item.labelName }}</view>
        <view class="ml-12 text-999 font-24 ml-6 text-line-through">￥{{ info.costPrice }}</view>
      </view>
      <view class="font-bold px-20 pt-14 pb-30 font-36">{{ info.name }}</view>
      <view class="flex items-center px-20 py-30 solid-top-1">
        <view class="flex items-center">
          <view class="flex items-center mr-30">
            <u-icon name="close-circle-fill" :color="themeColor" size="28rpx"></u-icon>
            <view class="font-bold ml-8">不支持退款</view>
          </view>
          <view v-if="info.purchaseQuantity > 0" class="flex items-center">
            <u-icon :name="info.purchaseQuantity == 0 ? 'checkmark-circle-fill' : 'close-circle-fill'" :color="themeColor" size="28rpx"></u-icon>
            <view class="font-bold ml-8">{{ tip }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="info.package.length" class="package px-20 pt-20">
      <view class="mb-20 font-bold font-24">包含{{ info.package.length }}件商品</view>
      <view v-for="(item, index) in info.package" :key="index" class="flex mb-28">
        <image class="package-img" :src="item.imageUrl" mode="scaleToFill"></image>
        <view class="package-detail">
          <text>{{ item.name }}</text>
          <text>x{{ item.number }}</text>
        </view>
      </view>
    </view>
    <!-- 底部信息 -->
    <zm-tabs v-model="tabKey" :list="tabList" text-key="name" value-key="value" @change="handleTabChange"></zm-tabs>

    <view class="p-24 bg-white">
      <!-- 购买须知 -->
      <zm-richtext v-show="tabKey == 1" :content="info.details"></zm-richtext>
      <!-- 可用影城 -->
      <suit-cinema v-if="tabKey == 3" :height="height" :mall-commodity-id="mallCommodityId"></suit-cinema>
    </view>
    <!-- 底部按钮 -->
    <zm-footer safe-area-inset-bottom background="#fff" z-index="10">
      <view class="px-24 py-20">
        <zm-button height="100rpx" text-size="32rpx" text-weight="600" type="primary" round @click="handleBuy">立即抢购</zm-button>
      </view>
    </zm-footer>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import SuitCinema from "./components/suit-cinema/suit-cinema.vue"
import { isUrl } from "@/utils/check"
import { mapGetters } from "vuex"
export default {
  name: "mall-index",
  components: { SuitCinema },
  mixins: [page],
  data() {
    return {
      height: 0,
      mallCommodityId: "",
      info: {
        image: [],
        label: [],
        package: []
      },
      tabList: [
        { name: "购买须知", value: "1" },
        { name: "使用教程", value: "2" }
      ],
      tabKey: "1"
    }
  },
  computed: {
    ...mapGetters(["cityName"]),
    tip() {
      return this.info?.purchaseQuantity == 0 ? "不限购" : `限购${this.info.purchaseQuantity}件`
    }
  },
  onLoad(options) {
    this.mallCommodityId = options.mallCommodityId
    this.handleDetail()
  },
  onShow() {
    this.tabKey == 2 && (this.tabKey = 1)
  },
  methods: {
    handleDetail() {
      uni.$api.mall.getCommodityInfo({ mallCommodityId: this.mallCommodityId }).then((res) => {
        this.info = res
        if (["1", "3"].includes(this.info.type)) {
          // 1自有券 3自有卡
          this.tabList.push({ name: "可用影城", value: "3" })
        }
      })
    },
    handleTabChange(e) {
      console.log(e)
      if (e.value == 2) {
        if (isUrl(this.info.tutorialUrl)) {
          uni.$setCache("webviewSrc", `${this.info.tutorialUrl}`)
          uni.$toView({
            url: "pages/utils/webview/webview",
            params: {
              title: "使用教程"
            }
          })
        } else {
          this.$setCache("richtext", {
            title: "使用教程",
            content: this.info.tutorialUrl
          })
          uni.$toView("pages/utils/richtext/richtext")
        }
      }
    },
    handleHeight(e) {
      this.height = e
    },
    handleBuy() {
      uni.$toView({
        url: "pages/mall/mall-cart/mall-cart",
        params: {
          mallCommodityId: this.mallCommodityId
        }
      })
    },
    // 点击演员
    handleClickGoods(index) {
      uni.previewImage({
        current: index,
        urls: this.info.image.map((item) => item.imageUrl)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-wrap {
  background: #fff;
  height: 500rpx;
  width: 100%;
  .swiper-item {
    height: 100%;
    width: 100%;
    .swiper-item-image {
      height: 100%;
      width: 100%;
    }
  }
}
.content {
  margin: 20rpx 24rpx;
  background: #fff;
  border-radius: 24rpx;
  .tag {
    color: #fd7441;
    padding: 4rpx 8rpx;
    font-size: 22rpx;
    border-radius: 12rpx;
    border-color: #fd7441;
    align-self: center;
  }
}
.package {
  margin: 0 24rpx 20rpx;
  background: #fff;
  border-radius: 24rpx;
  &-img {
    width: 150rpx;
    height: 100rpx;
  }
  &-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 26rpx;
    // color: #000;
    font-size: 24rpx;
  }
}
</style>
